<template>
  <a-select
    :options="enumList"
    :value.sync="__proxyValue"
    @change="handleChange"
    label-attr-name="Name"
    placeholder="请选择物料公式"
    size="small"
    v-bind="$attrs"
    v-on="$listeners"
    val-attr-name="FormulaId"/>
  <!--  "FText": "[照片高]*[照片宽]*[数量]",-->
  <!--  "name": "面积",-->
</template>

<script>
  import ASelect from '@/components/ATheFridayClub/ASelect'
  import { GetProductType, QueryFormula } from '@/api/productInformation'
  import { ERR_OK } from '@/utils/commons'
  import Vue from 'vue'

  let cacheResult = []
  let isLoading = false

  export default {
    name: 'FormulaSelect',
    components: { ASelect },
    props: {
      value: {
        type: [Number, String],
        require: true
      },
      formulaName: {
        type: String
      }
    },
    computed: {
      __proxyValue: {
        get() {
          return this.value
        },
        set(newValue) {
          this.$emit('update:input', newValue)
        }
      }
    },

    created() {
      this.getData()
    },

    data() {
      return {
        enumList: []
      }
    },

    methods: {
      handleChange(id) {
        const { FText } = this.enumList.find(v => v['FormulaId'] === id)
        this.$emit('update:formulaName', FText)
      },
      async getData() {
        try {
          if (isLoading) {
            return
          }
          if (cacheResult && cacheResult.length > 0) {
            // return cacheResult
            this.enumList = cacheResult
            return
          }
          isLoading = true
          const { Code, Result } = await QueryFormula()
          if (Code === ERR_OK) {
            this.enumList = cacheResult = Result
          }
        } catch (e) {
          console.log(e)
        } finally {
          isLoading = false
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
